import { Component, PropEditor, PropEditorState } from "maishu-jueying";
import { Props as ComponentProps, ProductInfo } from "./component"
import { dropdown } from "controls/dropdown";
import React = require("react");
import { dataSources } from "services/dataSources";
import { numberInput, image } from "components/common/custom-prop-editors";
import { FieldsEditor, ArgumentsEditor } from "./property-editors";


let product: keyof ComponentProps = "product";
let name: keyof ComponentProps["product"] = "Name";
export let nameProp = `${product}.${name}`;
Component.setPropEditor({
    propName: nameProp,
    editorType: PropEditor.textInput(),
    componentType: ProductInfo,
    displayName: "名称",
})

let title: keyof ComponentProps["product"] = "Title";
export let titleProp = `${product}.${title}`;
Component.setPropEditor({
    propName: titleProp,
    editorType: PropEditor.textInput(),
    componentType: ProductInfo,
    displayName: "简介"
})

class CategoryIdFieldEditor extends PropEditor<PropEditorState<string>, string>{
    render() {
        return <div ref={e => {
            if (!e) return;

            let name: keyof Product = "ProductCategoryId";
            dropdown<Category>({
                element: e, dataSource: dataSources.category,
                textField: "Name", valueField: "Id",
                emptyText: "请选择类别", name,
                value: this.props.value,
                onChanged: (item) => {
                    if(item == null){
                        this.props.updateComponentProp(null);
                        return;
                    }
                    this.props.updateComponentProp(item.Id);
                },
                addDialog: {
                    label: "名称",
                    placeholder: "请输入品类名称"
                }
            });
        }}>
        </div>
    }
}

let categoryId: keyof ComponentProps["product"] = "ProductCategoryId";
export let categoryIdProp = `${product}.${categoryId}`;
Component.setPropEditor({
    propName: categoryIdProp,
    editorType: CategoryIdFieldEditor,
    componentType: ProductInfo,
    displayName: "品类"
})

let price: keyof ComponentProps["product"] = "Price";
export let priceProp = `${product}.${price}`;
Component.setPropEditor({
    propName: priceProp,
    editorType: numberInput(),
    componentType: ProductInfo,
    displayName: "价格"
})

let SKU: keyof ComponentProps["product"] = "SKU";
export let skuProp = `${product}.${SKU}`;
Component.setPropEditor({
    propName: skuProp,
    editorType: PropEditor.textInput(),
    componentType: ProductInfo,
    displayName: "SKU"
})

class BrandIdFieldEditor extends PropEditor<PropEditorState<string>, string>{
    render() {
        return <div ref={e => {
            if (!e) return;

            let name: keyof Product = "ProductCategoryId";
            dropdown<Brand>({
                element: e, dataSource: dataSources.brand,
                textField: "Name", valueField: "Id",
                emptyText: "请选择品牌", name,
                value: this.props.value,
                onChanged: (item) => {
                    this.props.updateComponentProp(item.Id);
                },
                addDialog: {
                    label: "名称",
                    placeholder: "请输入品类名称"
                }
            });
        }}>
        </div>
    }
}

let brandId: keyof Product = "BrandId";
export let brandIdProp = `${product}.${brandId}`;
Component.setPropEditor({
    propName: brandIdProp,
    editorType: BrandIdFieldEditor,
    componentType: ProductInfo,
    displayName: "品牌"
})

let imageCover: keyof Product = "ImageCover";
export let imageCoverProp = `${product}.${imageCover}`;
Component.setPropEditor({
    propName: imageCoverProp,
    editorType: image("上传图片", 150),
    componentType: ProductInfo,
    displayName: "封面图片"
})



let fields: keyof Product = "Fields";
export let fieldsProp = `${product}.${fields}`;
Component.setPropEditor({
    propName: fieldsProp,
    editorType: FieldsEditor,
    componentType: ProductInfo,
    displayName: "商品规格"
})

let args: keyof Product = "Arguments";
export let argumentsProp = `${product}.${args}`;
Component.setPropEditor({
    propName: argumentsProp,
    editorType: ArgumentsEditor,
    componentType: ProductInfo,
    displayName: "商品参数"
})
